<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<el-row :gutter="20">
					<el-col :span="16">
						<el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">新增</el-button>
						<el-popconfirm title="你确定导出该账单吗？" confirm-button-text="确定" cancel-button-text="取消"
							@confirm="uploadExcel">
							<template #reference>
								<el-button style="margin-bottom: 10px;" type="danger">导出表格</el-button>
							</template>
						</el-popconfirm>
					</el-col>
					<el-col :span="8">
						<div class="m-4">
							<div class="block" style="float: right; margin-right: 10px;">
								<el-date-picker v-model="data" type="month" placeholder="请选择月份账单"
									@change="selectAll(1)" />
								<el-button type="danger" :icon="Delete" circle size="small" style="margin-left: 5px"
									@click="clearData" />
							</div>
						</div>
					</el-col>
				</el-row>
				<el-table :data="accountPageInfo.list" border style="width: 100%; margin-top: 30px;">
					<el-table-column prop="ano" label="账单号" width="180px" />
					<el-table-column prop="elderly.ename" label="老人姓名" width="100px" />
					<el-table-column label="头像" width="110px">
						<template #default="scope">
							<el-avatar :size="80"
								:src="SERVER_ADDR +'/upload/' + scope.row.elderly.picdir"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column prop="adata" label="账单日期" width="120px" />
					<el-table-column prop="elderly.checkDate" label="入住日期" width="120px" />
					<el-table-column prop="elderly.emergencyContact" label="紧急联系人" width="130px" />
					<el-table-column prop="elderly.idCard" label="身份证" width="180px" />
					<el-table-column prop="elderly.room.rno" label="房间号" width="80px" />
					<el-table-column prop="amoney" label="账单价格" width="100px" />
					<el-table-column prop="astate" label="状态" width="100px">
						<template #default="scope">
							<span v-if="scope.row.astate == 1">
								<el-tag type="warning">未支付</el-tag>
							</span>
							<span v-else-if="scope.row.astate == 2">
								<el-tag type="success">已支付</el-tag>
							</span>
							<span v-else>
								<el-tag type="danger">坏账</el-tag>
							</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="70px">
						<template #default="scope">
							<el-button type="primary" style="width: 15px;" :icon="View"
								@click="selectByAid(scope.row.aid)" />
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页开始 -->
				<el-row class="row-bg" justify="center">
					<el-col :span="5">
						<div class="grid-content ep-bg-purple" />
					</el-col>
					<el-col :span="8">
						<el-pagination background layout="prev, pager, next" :page-count="accountPageInfo.pages"
							@change="selectAll" style="margin-top: 10px; margin-left: 25%;"
							v-model:urrent-page="accountPageInfo.pageNum" />
					</el-col>
					<el-col :span="5">
						<div class="grid-content ep-bg-purple" />
					</el-col>
				</el-row>
				<!-- 分页结束 -->
			</el-card>
		</el-col>
	</el-row>
	<!-- 详细信息框开始 -->
	<el-drawer v-model="drawer" title="详细账单" :with-header="false">
		<el-descriptions title="详细账单" direction="vertical" :column="4" :size="size" border>
			<el-descriptions-item label="老人名">{{ salaryByAid.elderly.ename }}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{ salaryByAid.elderly.phone }}</el-descriptions-item>
			<el-descriptions-item label="账单日期" :span="2">{{ salaryByAid.adata }}</el-descriptions-item>
		</el-descriptions>

		<el-descriptions title="账单明细" :column="5" :size="size" direction="vertical" :style="blockMargin">
			<el-descriptions-item label="房间价格">+{{ salaryByAid.elderly.room.rmoney }}</el-descriptions-item>
			<el-descriptions-item label="餐饮费">+1000</el-descriptions-item>
			<el-descriptions-item label="护工费">+1000</el-descriptions-item>
			<el-descriptions-item label="房间清理费">+1000</el-descriptions-item>
			<el-descriptions-item label="水电费">+{{ salaryByAid.salary }}</el-descriptions-item>
			<el-descriptions-item label="总费用">
				<el-tag size="small">账单明细</el-tag>
			</el-descriptions-item>
			<el-descriptions-item :label="salaryByAid.amoney">
				{{ salaryByAid.description }}
			</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
	<!-- 详细信息框结束 -->
	<!-- 新增账单对话框开始 -->
	<el-dialog v-model="addDialoadShow" title="新增账单" width="500">
		<el-form>
			<el-form-item label="老人" label-width="20%">
				<el-select v-model="addEldely.eid" clearable placeholder="所选员工" style="width: 240px" >
					<el-option v-for="item in elderlyList" :key="item.key" :label="item.value" :value="item.key" />
				</el-select>
			</el-form-item>
			<el-form-item label="账单日期" label-width="20%">
				<el-date-picker v-model="addEldely.adata" type="date" placeholder="请选择一个时间" format="YYYY-MM-DD"
					value-format="YYYY-MM-DD" style="width: 240px" />
			</el-form-item>
			<el-form-item label="账单金额" label-width="20%">
				<el-input v-model="addEldely.amoney" autocomplete="off" style="width: 240px" />
			</el-form-item>
			<el-form-item label="账单备注" label-width="20%">
				<el-input v-model="addEldely.description" autocomplete="off" style="width: 240px" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="addDialoadShow = false">取消</el-button>
				<el-button type="primary" @click="insert">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 新增工资对话框结束 -->
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { DataAnalysis, Minus, Delete, View } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import accountApi from '@/api/admin/accountApi.js';
import elderlyApi from '@/api/user/elderlyApi.js';
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//定义工资的分页
const accountPageInfo = ref({});
const data = ref('');
//定义查询所有的账单方法
const selectAll = (pageNum) => {
	accountApi.selectAll(pageNum, data.value)
		.then(resp => {
			accountPageInfo.value = resp.data
		})
}
//定义回显数据
const salaryByAid = ref({});
const drawer = ref(false);
//定义回显方法
const selectByAid = (aid) => {
	accountApi.selectByAid(aid)
		.then(resp => {
			if (resp.code == 10000) {
				salaryByAid.value = resp.data
				drawer.value = true;
			}

		})
}
//定义清空时间的方法
const clearData = () => {
	data.value = ''
	selectAll(1)
}
const elderlyList = ref([])
//查询所有的老人
const allElderly = () => {
	accountApi.allElderly()
		.then(resp => {
			elderlyList.value = resp.data
		})
}
//定义控制对话框的方法
const addDialoadShow = ref(false);
const showAddModel = () => {
	allElderly()
	addDialoadShow.value = true;
}
//定义新增账单模块
const addEldely = ref({
	ano: "",
	amoney: "",
	astate: "",
	adata: "",
	description: "",
	eid: null,
})
const insert = () => {
	addEldely.value.ano = rand(1000,9999)
	addEldely.value.astate = 1
	console.log(addEldely.value)
	accountApi.insert(addEldely.value)
		.then(resp => {
			if (resp.code == 10000) {
				ElMessage.success("新增成功")
				addEldely.value = {
					ano: "",
					amoney: "",
					astate: "",
					adata: "",
					description: "",
					eid: 0,
				}
				selectAll(1)
				addDialoadShow.value = false;
			}else{
				ElMessage.error(resp.msg)
			}
		})
}
//生成随机账单号
function rand(min, max) {
	const now = new Date();
	const year = now.getFullYear();
	const month = ('0' + (now.getMonth() + 1)).slice(-2);
	const day = ('0' + now.getDate()).slice(-2);
	var hours = now.getHours().toString().padStart(2, '0'); // 补零
	var minutes = now.getMinutes().toString().padStart(2, '0'); // 补零
	var seconds = now.getSeconds().toString().padStart(2, '0'); // 补零
	return year + month + day + hours + minutes + seconds+ Math.floor(Math.random() * (max - min));
}
//导出账单Excel
const uploadExcel = ()=>{
		accountApi.uploadExcel(data.value)
		.then(response => {
			ElMessage.success("正在下载Excel")
			// 请求成功返回后，获取到Excel文件的二进制数据
			const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
			// 创建下载链接
			const downloadUrl = URL.createObjectURL(blob);
			// 创建一个隐藏的a标签，设置下载链接和文件名，模拟点击下载
			const link = document.createElement('a');
			link.style.display = 'none';
			link.href = downloadUrl;
			link.download = data.value + '账单.xlsx';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			}).catch(error => {
			// 请求失败处理
			console.error(error);
			})
	}
selectAll(1)
</script>
<style scoped>
.demo-progress .el-progress--line {
	margin-bottom: 10px;
	max-width: 100%;
}

.demo-date-picker {
	display: flex;
	width: 100%;
	padding: 0;
	flex-wrap: wrap;
}

.demo-date-picker .block {
	padding: 30px 0;
	text-align: center;
	border-right: solid 1px var(--el-border-color);
	flex: 1;
}

.demo-date-picker .block:last-child {
	border-right: none;
}

.demo-date-picker .container {
	flex: 1;
	border-right: solid 1px var(--el-border-color);
}

.demo-date-picker .container .block {
	border-right: none;
}

.demo-date-picker .container .block:last-child {
	border-top: solid 1px var(--el-border-color);
}

.demo-date-picker .container:last-child {
	border-right: none;
}

.demo-date-picker .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
</style>